<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#"> 
<!--

-->
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	
    <title>Глобус - 3Dcoastline</title>
	
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAQSoN48j7rjZcIIA_ZoGJSRQ_2OOd3pJr2kTduwgeopUaa7SGeRQZhFrOA51woHTuA4Pf0Gm4ZMKzVA"> </script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script src="http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
	<script src="http://earth-api-samples.googlecode.com/svn/trunk/lib/kmldomwalk.js" type="text/javascript"> </script>
			
	<link rel="icon" type="image/x-icon" href="https://sites.google.com/site/3dcoastliner/home/network_6170.ico?attredirects=0" />
	<link rel="shortcut icon" type="image/x-icon" href="https://sites.google.com/site/3dcoastliner/home/network_6170.ico?attredirects=0" />
	
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
<style>    
    #divservlet { padding: 0.5em; border: 1px solid silver; background-color: rgb(192,227,244);  position: absolute; right:285px; left:285px; top: 10px; height: 100px; title: "Ява-сервлет 'Гостевая книга'"; }
	#divsrevletphotoexample { padding: 0.5em; border: 1px solid silver; background-color: rgb(192,227,244);  position: absolute; right:285px; left:285px; top: 10px; height: 100px; title: "Ява-сервлет 'Гостевая книга'"; }
</style> 
<!--	
<script type="text/javascript">

	var $j = jQuery.noConflict();
	$j(function() {
			function toggleDivPhotoServlet() { $j( "#divphotoservlet" ).toggle( "drop", 2000 ); };
			$j( "#divguestbookservlet" ).draggable().resizable();
			j( "#divphotoservlet" ).draggable().resizable();
	});
</script>
-->	
<script type="text/javascript">
	var geocoder;
	var temp;
    var myGE = null;
	var tour;
	var myGoogleMap;
	var myYandexMap;
	var overlays = [];
	var noalt = 4;
	var yandexMapZoom = 1;
	var googleMapZoom = 1;
	var yandexMapZoomDelta = 0;
		
	var fullScreenState = false;
    var noFullScreenIcon = null;
    var fullScreenIcon = null;
	
	var panoramiobf = 'https://sites.google.com/site/3dcoastliner/home/680_PanoramioBestFo.kmz';
	var pangiga = 'http://mw2.google.com/mw-earth-vectordb/gallery_website/en/Gigapan_Photos.kml';
	var panocities = 'http://mw1.google.com/mw-earth-vectordb/dynamic/360cities/1/en/root.kmz';
	var panowwp = 'http://www.worldwidepanorama.org/worldwidepanorama/wwp_all/all_of_wwp.kmz';
	var panoviewat = 'http://services.google.com/earth/kmz/view_at_n.kmz';
	var povertrlag = 'https://sites.google.com/site/3dcoastliner/globus/treta-laguna/Третья_лагуна.kml';
	//var poveraya = 'https://sites.google.com/site/3dcoastliner/globus/mys-aja/3-hr.kml';
	var poveraya1 = 'https://sites.google.com/site/3dcoastliner/globus/mys-aja/P1010047.kml';
	var pover06_1_DSC00374 = 'https://sites.google.com/site/3dcoastliner/globus/staticeskaa/06_1_DSC00374.kml';
	var pover06_2_DSC00372 = 'https://sites.google.com/site/3dcoastliner/globus/staticeskaa/06_2_DSC00372.kml';
	var pover06_3_DSC00369 = 'https://sites.google.com/site/3dcoastliner/globus/staticeskaa/06_3_DSC00369.kml';
	var passes = 'http://www.westra.ru/passes/kml/passes.kml';

	var currentKmlObjects = {
		'panoramiobf': null,
		'pangiga': null,
		'panocities': null,
		'panowwp': null,
		'panoviewat': null,
		'passes': null
	  };
	  
google.load("earth", "1");
google.load("maps", "3", {other_params: "sensor=false"});  

function initGoogleEarth() {
    var content = document.getElementById('map3d');
	  
    google.earth.createInstance("map3d", initCallback, failureCallback);
	
	showCamera();
	showDivPhoto();
	//hideDivGuestbookServlet();
	//showGooglemap();
	//showDivServlet();
}

function initGoogleMap() {
			geocoder = new google.maps.Geocoder();
				//var lookAt = myGE.getView().copyAsLookAt(myGE.ALTITUDE_RELATIVE_TO_GROUND);
		var myOptions = {
			  center: new google.maps.LatLng(44.429800,33.651809),
				//center: new google.maps.LatLng(lookAt.getLatitude(),lookAt.getLongitude()),
			  zoom: googleMapZoom,
			  mapTypeId: google.maps.MapTypeId.ROADMAP
			};
		myGoogleMap = new google.maps.Map(document.getElementById("googlemap"),
				myOptions);
}

function initYandexMap(){  
	    //var lookAt = myGE.getView().copyAsLookAt(myGE.ALTITUDE_RELATIVE_TO_GROUND);
		//myGoogleMap.setCenter(new google.maps.LatLng(lookAt.getLatitude(),lookAt.getLongitude()));
		var lat = myGoogleMap.getCenter().lat(); 
		var lng = myGoogleMap.getCenter().lng();
		
		myYandexMap = new ymaps.Map ("yandexmap", {
            center: [lat, lng],
				//center: [lookAt.getLatitude(), lookAt.getLongitude()],
            zoom: yandexMapZoom
        });
		myYandexMap.controls.add('smallZoomControl');
		myYandexMap.controls.add('typeSelector');
		myYandexMap.controls.add('scaleLine');
		myYandexMap.controls.add('miniMap');
}

function initCallback(object) {
	myGE = object;
	myGE.getWindow().setVisibility(true);
	google.earth.addEventListener(myGE.getView(), "viewchange", eventListener);
	myGE.getNavigationControl().setVisibility(myGE.VISIBILITY_AUTO);
	myGE.getNavigationControl().setStreetViewEnabled(true);
	myGE.getLayerRoot().enableLayerById(myGE.LAYER_BUILDINGS, true);
	//myGE.getLayerRoot().enableLayerById(myGE.LAYER_BORDERS, true);
    
	createFullScreenIcon();
    createNormalScreenIcon();
      
    google.earth.addEventListener(myGE.getWindow(), "click", handleMouseClick);
	
	//Start of maps overlay
	googleMapOverlay(); 
	yandexMapOverlay();
	  		
	//f_pano = getNL(poveraya);  f_pano.setVisibility(true);
	f_pano = getNL(poveraya1);  f_pano.setVisibility(true);
	//f_pano = getNL(panocities);  f_pano.setVisibility(true);
	//f_pano = getNL(panowwp);  f_pano.setVisibility(true);
	//f_pano = getNL(panoviewat);  f_pano.setVisibility(true);
	f_pano = getNL(povertrlag);  f_pano.setVisibility(true);
	f_pano = getNL(pover06_1_DSC00374);  f_pano.setVisibility(true);
	f_pano = getNL(pover06_2_DSC00372);  f_pano.setVisibility(true);
	f_pano = getNL(pover06_3_DSC00369);  f_pano.setVisibility(true);
  
	showGooglemap();
	fly2cosmos();
  
	// if the page loaded with checkboxes checked, load the appropriate
    // KML files
    if (document.getElementById('kml-panocities-check').checked)
      loadKml('panocities');
    if (document.getElementById('kml-panowwp-check').checked)
      loadKml('panowwp');
    if (document.getElementById('kml-panoviewat-check').checked)
      loadKml('panoviewat');
	if (document.getElementById('kml-panoramiobf-check').checked)
      loadKml('panoramiobf');
	if (document.getElementById('kml-pangiga-check').checked)
      loadKml('pangiga');
	if (document.getElementById('kml-passes-check').checked)
      loadKml('passes');

		var href = 'https://sites.google.com/site/3dcoastliner/globus/staticeskaa/Tour_mUtrish.kml';
		google.earth.fetchKml(myGE, href, fetchCallback);

		function fetchCallback(fetchedKml) {
            // Alert if no KML was found at the specified URL.
            if (!fetchedKml) {
                setTimeout(function() {
                    alert('Bad or null KML');
                }, 0);
                return;
            }

            // Add the fetched KML into this Earth instance.
            myGE.getFeatures().appendChild(fetchedKml);

            // Walk through the KML to find the tour object; assign to variable 'tour.'
            walkKmlDom(fetchedKml, function() {
                if (this.getType() == 'KmlTour') {
					tour = this;
                    return false;
                }
            });
        }
} 

function yandexMapOverlay() {
		google.earth.addEventListener(myGE.getView(), 'viewchange', function(evt) {
			//var lookAt = myGE.getView().copyAsLookAt(myGE.ALTITUDE_RELATIVE_TO_GROUND);
			//myGoogleMap.setCenter(new google.maps.LatLng(lookAt.getLatitude(),lookAt.getLongitude()));
			// Яндекс-карта следит за Гугл-картой:
			var lat = myGoogleMap.getCenter().lat(); 
			var lng = myGoogleMap.getCenter().lng();		
			
			//myYandexMap.setCenter(new google.maps.LatLng(37,-122),8);
			myYandexMap.setCenter([lat,lng], yandexMapZoom);
		});
}

function googleMapOverlay() {
	// GoogleMap следит за Глобусом и рисует поле обзора Глобуса в виде синей трапеции:
	google.earth.addEventListener(myGE.getView(), 'viewchange', function(evt) {
		
		clearOverlays();
		
		var lookAt = myGE.getView().copyAsLookAt(myGE.ALTITUDE_RELATIVE_TO_GROUND);
		var camera = myGE.getView().copyAsCamera(myGE.ALTITUDE_RELATIVE_TO_GROUND);
			noalt = camera.getAltitude(); 
			noalt = Math.log(noalt); 
			noalt = 100/noalt; 
			noalt = noalt - 2; 
			noalt = noalt.toFixed(); 
				
		var hitTestTL = myGE.getView().hitTest(0, myGE.UNITS_FRACTION, 0, myGE.UNITS_FRACTION, myGE.HIT_TEST_GLOBE);
		var hitTestTR = myGE.getView().hitTest(1, myGE.UNITS_FRACTION, 0, myGE.UNITS_FRACTION, myGE.HIT_TEST_GLOBE);
		var hitTestBR = myGE.getView().hitTest(1, myGE.UNITS_FRACTION, 1, myGE.UNITS_FRACTION, myGE.HIT_TEST_GLOBE);
		var hitTestBL = myGE.getView().hitTest(0, myGE.UNITS_FRACTION, 1, myGE.UNITS_FRACTION, myGE.HIT_TEST_GLOBE);
		
		var hitTestBoundsCoords = [
				new google.maps.LatLng(hitTestTL.getLatitude(), hitTestTL.getLongitude()),
                new google.maps.LatLng(hitTestTR.getLatitude(), hitTestTR.getLongitude()),
				new google.maps.LatLng(hitTestBR.getLatitude(), hitTestBR.getLongitude()),
				new google.maps.LatLng(hitTestBL.getLatitude(), hitTestBL.getLongitude()),
				new google.maps.LatLng(hitTestTL.getLatitude(), hitTestTL.getLongitude())
			  ];

			  // Construct the polygon
			  // Note that we don't specify an array or arrays, but instead just
			  // a simple array of LatLngs in the paths property
			  var hitTestBoundsPolygon = new google.maps.Polygon({
				paths: hitTestBoundsCoords,
				strokeColor: "#3f3",
				strokeOpacity: 2,
				strokeWeight: 1.00,
				fillColor: "#00f",
				fillOpacity: 0.25
			  });
			  
				switch (noalt) {
					case "0":  myGoogleMap.setZoom(1);  googleMapZoom = 1; break; 
					case "1":  myGoogleMap.setZoom(1);  googleMapZoom = 1; break;
					case "2":  myGoogleMap.setZoom(1);  googleMapZoom = 1; break; 
					case "3":  myGoogleMap.setZoom(1);  googleMapZoom = 1; break;
					case "4":  myGoogleMap.setZoom(2);  googleMapZoom = 2; break; 
					case "5":  myGoogleMap.setZoom(3);  googleMapZoom = 3; break;
					case "6":  myGoogleMap.setZoom(4);  googleMapZoom = 4; break; 
					case "7":  myGoogleMap.setZoom(6);  googleMapZoom = 6; break;
					case "8":  myGoogleMap.setZoom(7);  googleMapZoom = 7; break; 
					case "9":  myGoogleMap.setZoom(8);  googleMapZoom = 8; break;
					case "10": myGoogleMap.setZoom(9);  googleMapZoom = 9; break; 
					case "11": myGoogleMap.setZoom(10); googleMapZoom = 10; break;
					case "12": myGoogleMap.setZoom(11); googleMapZoom = 11; break; 
					case "13": myGoogleMap.setZoom(12); googleMapZoom = 12; break;
					case "14": myGoogleMap.setZoom(13); googleMapZoom = 13; break; 
					case "15": myGoogleMap.setZoom(14); googleMapZoom = 14; break;
					case "16": myGoogleMap.setZoom(15); googleMapZoom = 15; break; 
					case "17": myGoogleMap.setZoom(16); googleMapZoom = 16; break;
					case "18": myGoogleMap.setZoom(17); googleMapZoom = 17; break;
					case "19": myGoogleMap.setZoom(18); googleMapZoom = 18; break;
					case "20": myGoogleMap.setZoom(19); googleMapZoom = 19; break;
					case "21": myGoogleMap.setZoom(20); googleMapZoom = 20; break;
					case "22": myGoogleMap.setZoom(21); googleMapZoom = 21; break;
					default: myGoogleMap.setZoom(21);
				}
					yandexMapZoom = googleMapZoom + yandexMapZoomDelta; 
			hitTestBoundsPolygon.setMap(myGoogleMap);
			overlays.push(hitTestBoundsPolygon);
				
		myGoogleMap.setCenter(new google.maps.LatLng(lookAt.getLatitude(),lookAt.getLongitude()));
	});
}

function plusYandexMapZoomDelta() {
	yandexMapZoomDelta += 1;
};
function minusYandexMapZoomDelta() {
	yandexMapZoomDelta -= 1;
};

//http://apitricks.blogspot.com/2010/02/clearoverlays-in-v3.html:
function clearOverlays(){
  while(overlays[0]){
    overlays.pop().setMap(null);
  }
}

function codeAddress() {
    var address = document.getElementById("address").value;
    	
	geocoder.geocode( { 'address': address}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			myGoogleMap.setCenter(results[0].geometry.location);
			var marker = new google.maps.Marker({
				map: myGoogleMap,
				position: results[0].geometry.location
			});	
			//РАБОТАЕТ:
			var lookAt = myGE.createLookAt('');
			var lat = myGoogleMap.getCenter().lat(); 
			var lng = myGoogleMap.getCenter().lng();
			lookAt.setLatitude(lat);
			lookAt.setLongitude(lng);
			lookAt.setRange(50000.0); //default is 0.0
				
			// Update the view in Google Earth
			myGE.getView().setAbstractView(lookAt);
			
			// Поставить метку Геокодера на YandexMap:
			var myPlacemark = new ymaps.Placemark([lat,lng], { content: 'Вот тут!', balloonContent: 'Это тут.' });
			myYandexMap.geoObjects.add(myPlacemark);
		}
		else {
			alert("Geocode was not successful for the following reason: " + status);
		}
	});
}
	//Геолокатор:
function geolocator() {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(show_map);
	} 	else {
		error('not supported');
		}
}
function show_map(position) {
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;
	var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
	// Поставить метку Геолокатора на Гугл-карте: 
	myGoogleMap.setCenter(latlng);
			var marker = new google.maps.Marker({
				map: myGoogleMap,
				position: latlng,
				title:"You are here! But Moscow has long arms."
			});	
			//Установить Глобус над координатами метки:			
			var lookAt = myGE.createLookAt('');
			var lat = myGoogleMap.getCenter().lat(); 
			var lng = myGoogleMap.getCenter().lng();
			lookAt.setLatitude(lat);
			lookAt.setLongitude(lng);
			lookAt.setRange(50000.0); //default is 0.0
			// Update the view in Google Earth
			myGE.getView().setAbstractView(lookAt);
			// Поставить метку Геолокатора на Яндекс-карте:
			var myPlacemark = new ymaps.Placemark([lat,lng], { content: 'Вы здесь.', balloonContent: 'Вы тут!' });
			myYandexMap.geoObjects.add(myPlacemark);
}

function eventListener(event) {
	var camera = myGE.getView().copyAsCamera(myGE.ALTITUDE_RELATIVE_TO_GROUND);
	
	document.getElementById("id_lat_cam").innerHTML = camera.getLatitude().toFixed(5);
	document.getElementById("id_lng_cam").innerHTML = camera.getLongitude().toFixed(5);
	document.getElementById("id_alt_cam").innerHTML = camera.getAltitude().toFixed(2);
	document.getElementById("id_head_cam").innerHTML = camera.getHeading().toFixed(2);
	document.getElementById("id_tilt_cam").innerHTML = camera.getTilt().toFixed(2);
	document.getElementById("id_roll_cam").innerHTML = camera.getRoll().toFixed(2);
	document.getElementById("id_zoom_gmap").innerHTML = myGoogleMap.getZoom();
	document.getElementById("id_zoom_ymap").innerHTML = myYandexMap.getZoom();
	document.getElementById("id_d_zoom_ymap").innerHTML = yandexMapZoomDelta;
	document.getElementById("id_noalt_cam").innerHTML = noalt;
		
  var lookAt = myGE.getView().copyAsLookAt(myGE.ALTITUDE_RELATIVE_TO_GROUND);
	document.getElementById("id_lat_la").innerHTML = lookAt.getLatitude().toFixed(5);
	document.getElementById("id_lng_la").innerHTML = lookAt.getLongitude().toFixed(5);
	document.getElementById("id_rng_la").innerHTML = lookAt.getRange().toFixed(2);
	document.getElementById("id_alt_la").innerHTML = lookAt.getAltitude().toFixed(2);
	document.getElementById("id_head_la").innerHTML = lookAt.getHeading().toFixed(2);
	document.getElementById("id_tilt_la").innerHTML = lookAt.getTilt().toFixed(2);
	document.getElementById("id_zoom_map").innerHTML = myGoogleMap.getZoom().toFixed(2);
	
}

function enterTour() {
            if (!tour) {
               alert('No tour found!');
               return;
            }
            myGE.getTourPlayer().setTour(tour);
         }
 
function failureCallback(object) {
}

function getNL(kmlURL){
  var nl = myGE.createNetworkLink("");
  var link = myGE.createLink("");
  link.setHref(kmlURL);
  nl.setLink(link);
  myGE.getGlobe().getFeatures().appendChild(nl);
  return nl;
}

function fly2cosmos() {
  go(44.429800,33.651809,0,8000979.04,-10.52,0); 
}

function fly2aya() {
  go(44.429800,33.651809,0,1436.78,10.52,61.40); 
}

function fly2fio() {
  go(44.50138,33.50834,0,350,0,60); 
} 
   //44.49989811,33.49519717,200,120,2,70
function fly2trl() {
  go(44.73362259905476,37.42945157058471,11.88999999797014,60,-90.10515554611744,81.92955487847084); 
}

function go(lat,lon,alt,range,heading,tilt){
        var la = myGE.createLookAt('');     
        la.set(lat, lon, alt, myGE.ALTITUDE_RELATIVE_TO_GROUND, heading,tilt,range);
        myGE.getView().setAbstractView(la);
}
function toggleKml(file) {
    // remove the old KML object if it exists
    if (currentKmlObjects[file]) {
      myGE.getFeatures().removeChild(currentKmlObjects[file]);
      currentKmlObjects = null;
    }
    
    // if the checkbox is checked, fetch the KML and show it on Earth
    var kmlCheckbox = document.getElementById('kml-' + file + '-check');
    if (kmlCheckbox.checked)
      loadKml(file);
  }
function fetchKmlFromGuestbook() {
      // remove the old KML object if it exists
      //if (currentKmlObjects) {
        //myGE.getFeatures().removeChild(currentKmlObjects);
        //currentKmlObjects = null;
      //}
    
      var kmlUrlBox = document.getElementById('content');
      var kmlUrl = kmlUrlBox.value;
    
      google.earth.fetchKml(myGE, kmlUrl, finishFetchKml);
}  
function fetchKmlFromInput() {
      // remove the old KML object if it exists
      //if (currentKmlObjects) {
        //myGE.getFeatures().removeChild(currentKmlObjects);
        //currentKmlObjects = null;
      //}
    
      var kmlUrlBox = document.getElementById('kml-url');
      var kmlUrl = kmlUrlBox.value;
    
      google.earth.fetchKml(myGE, kmlUrl, finishFetchKml);
}
    
function finishFetchKml(kmlObject) {
      // check if the KML was fetched properly
      if (kmlObject) {
        // add the fetched KML to Earth
        //currentKmlObject = kmlObject;
        myGE.getFeatures().appendChild(kmlObject);
      } else {
        // wrap alerts in API callbacks and event handlers
        // in a setTimeout to prevent deadlock in some browsers
        setTimeout(function() {
          alert('Bad or null KML.');
        }, 0);
      }
}
function loadKml(file) {
    var kmlUrl = null;
	if (file == 'panoramiobf') kmlUrl = panoramiobf ;
	if (file == 'pangiga') kmlUrl = pangiga ;
	if (file == 'panocities') kmlUrl = panocities ;
	if (file == 'panowwp') kmlUrl = panowwp ;
	if (file == 'panoviewat') kmlUrl = panoviewat ;
	if (file == 'passes') kmlUrl = passes ;
	
	// fetch the KML
    google.earth.fetchKml(myGE, kmlUrl, function(kmlObject) {
      // NOTE: we still have access to the 'file' variable (via JS closures)
      
      if (kmlObject) {
        // show it on Earth
        currentKmlObjects[file] = kmlObject;
        myGE.getFeatures().appendChild(kmlObject);
      } else {
        // bad KML
        currentKmlObjects[file] = null;
  
        // wrap alerts in API callbacks and event handlers
        // in a setTimeout to prevent deadlock in some browsers
        setTimeout(function() {
          alert('Bad or null KML.');
        }, 0);
        
        // uncheck the box
        document.getElementById('kml-' + file + '-check').checked = '';
      }
    });
  }	
  
//function refix_w() {

function updateBildings() {
	var layerRoot = myGE.getLayerRoot();
	var bordersLayer = layerRoot.getLayerById(myGE.LAYER_BUILDINGS);
	if (bordersLayer.getVisibility()) {
	layerRoot.enableLayerById(myGE.LAYER_BUILDINGS, false);
	} else {
		layerRoot.enableLayerById(myGE.LAYER_BUILDINGS, true);
		}
}

function updateBorders() {
	var layerRoot = myGE.getLayerRoot();
	var bordersLayer = layerRoot.getLayerById(myGE.LAYER_BORDERS);
	if (bordersLayer.getVisibility()) {
	layerRoot.enableLayerById(myGE.LAYER_BORDERS, false);
	} else {
		layerRoot.enableLayerById(myGE.LAYER_BORDERS, true);
		}
}

function updateRoads() {
	var layerRoot = myGE.getLayerRoot();
	var roadsLayer = layerRoot.getLayerById(myGE.LAYER_ROADS);
	if (roadsLayer.getVisibility()) {
	layerRoot.enableLayerById(myGE.LAYER_ROADS, false);
	} else {
		layerRoot.enableLayerById(myGE.LAYER_ROADS, true);
		}
}

function updateOptions() {
  var options = myGE.getOptions();
  var form = document.options;
  
  options.setStatusBarVisibility(form.statusbar.checked);
  options.setGridVisibility(form.grid.checked);
  options.setOverviewMapVisibility(form.overview.checked);
  options.setScaleLegendVisibility(form.scaleLegend.checked);
//  options.setAtmosphereVisibility(form.atmosphere.checked);
//  options.setMouseNavigationEnabled(form.mouseNav.checked);

//  if (form.nav.checked) {
//    myGE.getNavigationControl().setVisibility(myGE.VISIBILITY_SHOW);
//  } else {
//    myGE.getNavigationControl().setVisibility(myGE.VISIBILITY_HIDE);
// }

}
	//start full scren
    function handleMouseClick(event){
      var INSET_PIXELS_X = document.getElementById("map3d").offsetWidth - event.getClientX();
      var INSET_PIXELS_Y = event.getClientY();
      if (INSET_PIXELS_X < 32){
        if (INSET_PIXELS_Y < 32){ toggleFullScreen();}
      }
    }

    function toggleFullScreen(){
      if (fullScreenState == true) {makeNormalScreen();}
      else {makeFullScreen();}
    }

    function makeFullScreen(){
       var samplecontainer = document.getElementById('fullscreencontainer');
       var container = document.getElementById('map3d');
       container.style.left = 0; 
       container.style.top = 0;
       container.style.width = samplecontainer.offsetWidth + 'px'; 
       container.style.height = samplecontainer.offsetHeight + 'px';
       fullScreenState = true;
       noFullScreenIcon.setVisibility(fullScreenState);
       fullScreenIcon.setVisibility(!fullScreenState);  
    }

    function makeNormalScreen(){
       var samplecontainer = document.getElementById('sizecontainer');
       var container = document.getElementById('map3d');
       container.style.left = samplecontainer.style.left; 
       container.style.top = samplecontainer.style.top;
       container.style.width = samplecontainer.offsetWidth + 'px'; 
       container.style.height = samplecontainer.offsetHeight + 'px';
       fullScreenState = false;
       noFullScreenIcon.setVisibility(fullScreenState);
       fullScreenIcon.setVisibility(!fullScreenState);
    }

    function createFullScreenIcon() {
        // create an image for the screen overlay
        var icon = myGE.createIcon('');
        icon.setHref('http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tofull.png');
        // create the screen overlay
        fullScreenIcon = myGE.createScreenOverlay('');
        fullScreenIcon.setDrawOrder(60);
        fullScreenIcon.setIcon(icon);
        // anchor point in top left of icon.
        fullScreenIcon.getScreenXY().setXUnits(myGE.UNITS_FRACTION);
        fullScreenIcon.getScreenXY().setYUnits(myGE.UNITS_FRACTION);
        fullScreenIcon.getScreenXY().setX(1);
        fullScreenIcon.getScreenXY().setY(1);
        // place icon in top left of screen.
        fullScreenIcon.getOverlayXY().setXUnits(myGE.UNITS_INSET_PIXELS);
        fullScreenIcon.getOverlayXY().setYUnits(myGE.UNITS_INSET_PIXELS);
        fullScreenIcon.getOverlayXY().setX(2);
        fullScreenIcon.getOverlayXY().setY(4);
        // Set icon size.
        fullScreenIcon.getSize().setXUnits(myGE.UNITS_PIXELS);
        fullScreenIcon.getSize().setYUnits(myGE.UNITS_PIXELS);
        fullScreenIcon.getSize().setY(32);
        fullScreenIcon.getSize().setX(32);
        // add the screen overlay to Earth
        myGE.getFeatures().appendChild(fullScreenIcon);
    }

    function createNormalScreenIcon() {
        // create an image for the screen overlay
        var icon = myGE.createIcon('');
        icon.setHref('http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tonormal.png');
        // create the screen overlay
        noFullScreenIcon = myGE.createScreenOverlay('');
        noFullScreenIcon.setDrawOrder(62);
        noFullScreenIcon.setIcon(icon);
        // anchor point in top left of icon.
        noFullScreenIcon.getScreenXY().setXUnits(myGE.UNITS_FRACTION);
        noFullScreenIcon.getScreenXY().setYUnits(myGE.UNITS_FRACTION);
        noFullScreenIcon.getScreenXY().setX(1);
        noFullScreenIcon.getScreenXY().setY(1);
        // place icon in top right of screen.
        noFullScreenIcon.getOverlayXY().setXUnits(myGE.UNITS_INSET_PIXELS);
        noFullScreenIcon.getOverlayXY().setYUnits(myGE.UNITS_INSET_PIXELS);
        noFullScreenIcon.getOverlayXY().setX(2);
        noFullScreenIcon.getOverlayXY().setY(4);
        // Set icon size.
        noFullScreenIcon.getSize().setXUnits(myGE.UNITS_PIXELS);
        noFullScreenIcon.getSize().setYUnits(myGE.UNITS_PIXELS);
        noFullScreenIcon.getSize().setY(32);
        noFullScreenIcon.getSize().setX(32);
        noFullScreenIcon.setVisibility(false);
        // add the screen overlay to Earth
        myGE.getFeatures().appendChild(noFullScreenIcon);
    }

    function handleFullScreen(){
      if (window.innerWidth == screen.width){
        if (window.innerHeight > screen.height - 10){
          //this is likely caused by pressing F11 on the browser
          makeFullScreen();
        } else if (fullScreenState == true) { makeNormalScreen();}
      } else {makeNormalScreen();}
    }
	//end full screen
  
//google.setOnLoadCallback(init); 
//onload="init();" 

</script>
</head>

<body id="main" onload="initWebGL(); initGoogleEarth(); initGoogleMap(); initYandexMap();"  onresize="handleFullScreen();">
    
<div id="fullscreencontainer" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
</div>
<div id="sizecontainer" style="position: absolute; top: 0px; left: 185px; right: 185px; height: 100%;">
</div>
<div id="map3d_container" style="background-color:rgb(192,227,244); position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
<div id="map3d" style="position: absolute; top: 0px; left: 185px; right: 185px; height: 100%;">
</div>


<div id="sitelinks" style="padding: .5em; background-color: rgb(192,227,244); font-family: verdana, sans-serif; color: rgb(61, 133, 198); font-size:  x-small">		
<p><font color=rgb(244, 244, 244) size="2"><b>3D Coastliner</b></font><br>
<b><a href="https://sites.google.com/site/3dcoastliner/">Главная</a><br>
<font size="2">Глобус</font></b><br>
  - <a href="https://sites.google.com/site/3dcoastliner/globus/globus-opisanie">Глобус (описание)</a><br>
	<b><a href="https://sites.google.com/site/3dcoastliner/server">Сервер</a><br>
	<a href="https://sites.google.com/site/3dcoastliner/zagruzka">Загрузка</a><br>
	<a href="https://sites.google.com/site/3dcoastliner/seemka">Съёмка</a><br>
	<a href="https://sites.google.com/site/3dcoastliner/oboru">Оборудование</a><br>
	<a href="https://sites.google.com/site/3dcoastliner/snarazenie">Снаряжение</a><br>
	<a href="https://sites.google.com/site/3dcoastliner/novosti">Новости</a><br>
	<a href="http://groups.google.com/group/3Dcoastliner/?hl=ru">Форум</a><br>
	<a href="https://sites.google.com/site/3dcoastliner/ssylki">Ссылки</a><br>
	<a href="https://sites.google.com/site/3dcoastliner/system/app/pamyGEs/sitemap/hierarchy">Карта сайта</a></b>
</p>
</div>

<div id="objectsandoptions" style="padding: .5em; background-color: rgb(192,227,244); font-family: verdana, sans-serif; color: rgb(61, 133, 198); font-size:  x-small;">
<p><font size="2"><b>Изображения берегов</b></font><br><br>
<b>Фотографии Photo Overlay</b><br>
	<img src="https://sites.google.com/site/3dcoastliner/home/mini_blue_airplane_8x8.png?attredirects=0"> в <a href="javascript:go(44.73362259905476,37.42945157058471,11.88999999797014,15,-90.10515554611744,81.92955487847084);">Третью лагуну</a><br>
	<img src="https://sites.google.com/site/3dcoastliner/home/mini_blue_airplane_8x8.png?attredirects=0"> в <a href="javascript:go(44.429800,33.651809,0,1436.78,10.52,61.40);">Затерянный мир</a><br>
<form name="bildings" action='javascript:updateBildings();'>
      <input type="checkbox" checked onclick='updateBildings()' name="bildings" /><b>3D-модели</b><br />  
</form>
	<img src="https://sites.google.com/site/3dcoastliner/home/mini_blue_airplane_8x8.png?attredirects=0"> к <a href="javascript:go(44.50217,33.50848,0,380,-30,66);">Скале Св.Явления</a><br> 
	<img src="https://sites.google.com/site/3dcoastliner/home/mini_blue_airplane_8x8.png?attredirects=0"> к <a href="javascript:go(44.43891,38.18431,0,191,-23,74);">Скале Парус</a><br>
</p>
<p><b>3D-туры</b><br>
<img src="https://sites.google.com/site/3dcoastliner/home/mini_blue_airplane_8x8.png?attredirects=0"> к <a href="javascript:enterTour();">Малому Утришу</a><br>
</p>
<p><b>Слои</b><br>
	<input type="checkbox" id="kml-panoramiobf-check" onclick="toggleKml('panoramiobf');"><label for="kml-panoramiobf-check">Panoramio<a href="http://www.panoramio.com/"><img src="https://sites.google.com/site/3dcoastliner/home/external.png?attredirects=0"></a> Best Photo</label><br>
	<input type="checkbox" id="kml-pangiga-check" onclick="toggleKml('pangiga');"><label for="kml-pangiga-check">Gigapan<a href="http://www.gigapan.com/"><img src="https://sites.google.com/site/3dcoastliner/home/external.png?attredirects=0"></a></label><br>
	<input type="checkbox" checked id="kml-panocities-check" onclick="toggleKml('panocities');"><label for="kml-panocities-check">360 Cities<a href="http://www.360cities.net"><img src="https://sites.google.com/site/3dcoastliner/home/external.png?attredirects=0"></a></label><br> 
	<input type="checkbox" id="kml-panowwp-check" onclick="toggleKml('panowwp');"><label for="kml-panowwp-check">WWP<a href="http://worldwidepanorama.org"><img src="https://sites.google.com/site/3dcoastliner/home/external.png?attredirects=0"></a></label> (<img src="https://sites.google.com/site/3dcoastliner/home/mini_blue_airplane_8x8.png?attredirects=0"> к <a href="javascript:go(44.49989811,33.49519717,200,120,2,70);">мысу Фиолент</a>)<br> 
	<input type="checkbox" id="kml-panoviewat-check" onclick="toggleKml('panoviewat');"><label for="kml-panoviewat-check">ViewAt<a href="http://viewat.org/"><img src="https://sites.google.com/site/3dcoastliner/home/external.png?attredirects=0"></a></label> (<img src="https://sites.google.com/site/3dcoastliner/home/mini_blue_airplane_8x8.png?attredirects=0"> к <a href="javascript:go(44.760871,37.37971,50,5000,0,75);">Б.Утришу</a>)<br>
	<input type="checkbox" id="kml-passes-check" onclick="toggleKml('passes');"><label for="kml-passes-check">Горные перевалы <a href="http://www.westra.ru/passes/"><img src="https://sites.google.com/site/3dcoastliner/home/external.png?attredirects=0"></a></label><br>
</p>
<p><font size="2"><b>Опции Глобуса</b></font><br>
<form name="borders" action='javascript:updateBorders();'>
      <input type="checkbox" onclick='updateBorders()' name="borders" />Границы и названия<br />  
</form>
<form name="roads" action='javascript:updateRoads();'>
      <input type="checkbox" onclick='updateRoads()' name="roads" />Дороги<br />  
</form>
<form name="options" action='javascript:updateOptions();'>
      <input type="checkbox" onclick='updateOptions()' name="statusbar" />Строка состояния<br />
      <input type="checkbox" onclick='updateOptions()' name="grid" />Координатная сетка<br />
      <input type="checkbox" onclick='updateOptions()' name="overview" />Обзорная карта<br />
      <input type="checkbox" onclick='updateOptions()' name="scaleLegend" />Масштабная линейка<br />
</form></p>

<b>Геокодер</b>
<br>
<form >
<input id="address" type="text" size="20"  style="font-size: 10px;" value="Утриш"/>
    <input type="image" name="inputaddress"  src="https://sites.google.com/site/3dcoastliner/home/blue_airplane_button_16x16.png?attredirects=0" onclick="codeAddress(); return false;" title="fly to - поехали"/>
</form>
<br>
<b>Геолокатор </b><a href="javascript:geolocator();">Где Я?</a><br>
<br>
</div>
</div>

<!-- prompt the user, Camera or Gallery 
 <div id="divguestbookservlet" style="background-color: rgb(192,227,244); font-family: verdana, sans-serif; color: rgb(61, 133, 198); font-size:  x-small; position: absolute; top: 10px; right: 285px; left: 285px; height: 400px" title="Этот ява-сервлет - первый эксперимент по загрузке информации на App Engine.">
	<div id='divtopguestbookservlet' style='border: 1px solid silver; top: 40px; height: 10%; width: 100%;'>
		<div style="display:inline; margin:2px 4px;float:right"><img src="http://code.google.com/appengine/images/appengine-silver-120x30.gif" alt="Powered by Google App Engine" />
		</div><b>Guestbook servlet.</b><br>
		Также вы можете видеть <a href="guestbookall.jsp" target="_blank">все сообщения</a> в отдельной вкладке браузера.<br>
		Последние пять сообщений в обратном хронологическим порядке:
	</div>
	<div id='divguestbook' style='border: 1px solid silver; height: 90%; width: 100%;'>
		<iframe src="guestbook.jsp" width="100%" height="100%" frameborder="0" name="iframeguestbook" scrolling="no"></iframe>
	</div>
</div>
https://sites.google.com/site/3dcoastliner/globus/mys-aja/3-hr.kml
-->

<div id="divphotoservlet" style="background-color: rgb(192,227,244); font-family: verdana, sans-serif; color: rgb(61, 133, 198); font-size:  xx-small; position: absolute; top: 100px;  right: 285px; left: 285px; height: 600px" title="">
	<div id='divtopphotosrevlet' style='border: 1px solid silver; top: 40px; height: 85px; width: 100%;'>
		<b>Прицепить<sup>*</sup> фотооверлей: </b><input type="text" id="kml-url1" size="80" style="font-size: 10px;" value="">
		<input type="submit" style="font-size: 10px;" onclick='fetchKmlFromInput(); fly2aya();' value="на Глобус!"><br> 
		<sup>*</sup> - Чтобы прицепить к Глобусу фотооверлей, выберите в Журнале мышкой URL kml-файла, вставте его в окно и нажмите на кнопку.<br><br><br>
		<b>Журнал загрузки фотооверлеев на сервер.</b><br>
		Вы можете загрузить фотооверлей на сервер заполнив формы "URL kml-файла" и "Фото (jpg-файл"):
	</div>
	<div id='divphotoexample' style='background-color: rgb(240,230,140); border: 1px solid silver; height: 470px; width: 100%;'>
	 <!--<iframe src="http://hellopytempl.appspot.com/" width="100%" height="100%" frameborder="0" name="iframephotoexample" scrolling="no"></iframe>-->
     
		<a href="{{ url }}">{{ url_linktext }}</a>
        <form action="/sign" enctype="multipart/form-data" method="post">
          <div><label>URL kml-файла:</label></div>
          <div><input name="content" style="font-size: 10px;" size="80"></div>
          <div><label>Фото (jpg-файл):</label></div>
          <div><input type="file" size="80" style="font-size: 10px;" name="img"/><input type="submit" style="font-size: 10px;" onclick='fetchKmlFromGuestbook();' value="Загрузить на сервер"></div>
        </form>
        <b>На сервер загружены следующие URL kml-файов фотооверлеев</b> (показаны последние 5):
        <hr>
        {% for greeting in greetings %}
            <div style="display:inline;margin:5px 10px;float:right"><img src="img?img_id={{ greeting.key() }} "></img></div> 
            {{ greeting.date }}
            {% if greeting.author %}
                <b>{{ greeting.author }}</b> загрузил URL kml-файла и фото:
            {% else %}
                An anonymous person загрузил URL kml-файла и фото:
            {% endif %}
            <blockquote>{{ greeting.content|escape }}</blockquote><br><hr><br>
        {% endfor %}
	</div>
	<div id='divbottomphotosrevlet' style='top: 40px; height: 45px; width: 100%;'>
	<br>
	Сервер пока сохраняет только адреса (URL) kml-файлов в виде текстовой строки и фотографии (jpg-файлы, преобразуя их в аватарки  размером 64x64).
	</div>
</div>


<div id="divselectphotoscan"  style="background-color: transparent; font-family: verdana, sans-serif; color: rgb(200, 200, 200); font-size:  x-small; position: absolute; right: 0px; top: 0px; width: 185px; height: 90px">
<font face="verdana, sans-serif" style="color: rgb(61, 133, 198);" size="1">
<form name="formselectdivservlet" action="">
	<!-- open the camera immediately <input type="checkbox" onclick='toggleDivGuestbookServlet();' name="cbdivgservlet">Java Guestbook<br>-->
	<input type="checkbox" checked onclick='toggleDivPhotoServlet();' name="cbdivpservlet">Python PhotoGuestbook<br>
</form>
</font>


<br>
<b>ФОТО/3D-СКАН:</b><br>
<form name="formselectphotoscan" action="">
	<input name="selectphotoscan" type="radio" checked onclick="showDivPhoto();">Фотографирование <br>  
</font>
<font face="verdana, sans-serif" style="color: rgb(200, 200, 200);" size="1">	
	<input name="selectphotoscan" type="radio" onclick="showDivScan();">3D-Сканирование 
	<br>.                 (future feature)
</font>	
</form>
</div>

<div id="divuploadphoto"  style="background-color: transparent; font-family: verdana, sans-serif; color: rgb(200, 200, 200); font-size:  x-small; position: absolute; right: 0px; top: 100px; width: 185px; height: 80px">
<b>Выбрать/Снять/Загрузить фото берега:</b><br>
<form name="html5photos">
    <!-- prompt the user, Camera or Gallery 
    <input type="file" size="5" accept="image/*" style="font-size: 10px;"/><br>
	-->
    <!-- open the camera immediately -->
	<input type="file" size="5" accept="image/*;capture=camera" style="font-size: 10px;" id="capture"/><br>
	<br>
	<input type="submit" size="5"  style="font-size: 10px;" value="Загрузить на сервер" id="uploadphoto"/>
	</form>
</div>

<div id="divupload3dmodel"  style="background-color: transparent; font-family: verdana, sans-serif; color: rgb(200, 200, 200); font-size:  x-small; position: absolute; right: 0px; top: 100px; width: 185px; height: 80px">
<b>Выбрать/Сканировать/Загрузить 3D-модель берега:</b><br>

<form name="laser3dmodel">
	<input type="file" size="5" accept="image/*" style="font-size: 10px;" id="laser"/><br>
	<br>
	<input type="submit" size="5"  style="font-size: 10px;" value="Загрузить на сервер" id="upload3dmodel"/>
</form>
</div>

<div id="minimaps_container" style="background-color: transparent; font-family: verdana, sans-serif; color: rgb(61, 133, 198); font-size:  x-small; position: absolute; right: 0px; top: 200px; width: 185px; height: 100px">
<div id="divselectmap"  style="position: absolute; right: 0px; top: 0px; width: 185px; height: 100px">
<b>Показать мини-карту:</b><br>
<form name="formselectmap" action="">
	<input name="selectmap" type="radio" checked onclick="showGooglemap();">Google Map <a href="http://maps.google.ru/"><img src="https://sites.google.com/site/3dcoastliner/home/external.png"></a><br>
	<input name="selectmap" type="radio" onclick="showYandexMap();">Yandex Map <a href="http://maps.yandex.ru/"><img src="https://sites.google.com/site/3dcoastliner/home/external.png"></a><br>
	<input name="selectmap" type="radio" onclick="showWikimapia();">Wikimapia <a href="http://wikimapia.org/#lat=44.7518002&lon=37.4584651&z=12&l=1&m=b"><img src="https://sites.google.com/site/3dcoastliner/home/external.png"></a><br>
	<input name="selectmap" type="radio" onclick="showOsm();">OpenStreetMap <a href="http://www.openstreetmap.org/"><img src="https://sites.google.com/site/3dcoastliner/home/external.png"></a><br>
	<input name="selectmap" type="radio" onclick="showWebGLEarth();">WebGL Earth <a href="http://webglearth.org/"><img src="https://sites.google.com/site/3dcoastliner/home/external.png"></a><br>
</form>
</div>

<div id='googlemap_content' style="position: absolute; right: 0px; top: 110px; width: 185px; height: 40px">
<b>Google Map </b> 
<br>- follows the Globe
<br>- shows the field of view 
<br>- shows the marker of geocoder
<br>- Zoom is changed automatically 
<br> <a href="#" onClick="hideGooglemap();"><img align=right src="https://sites.google.com/site/3dcoastliner/home/blue_close_button_16x16.png?attredirects=0" title="hide-скрыть"></a><a href="#" onClick="initGoogleMap();"> <img align=right src="https://sites.google.com/site/3dcoastliner/home/blue_reload_button_16x16.png?attredirects=0" title="reload-перегрузить"></a>
</div>
<div id="googlemap" style="position: absolute; right: 0px; top: 195px; width: 185px; height: 270px">
</div>

<div id='yandexmap_content' style="position: absolute; right: 0px; top: 110px; width: 185px; height: 40px" title="Yandex has large scale maps for the Russian Empire only. Большие масштабы Яндекс-карты есть только для ru+by+kz+ua. При нажатии на '+' или '-' zoom Яндекс-карты увеличивается или уменьшается относительно zoom Гугл-карты после того, как Вы начнете вращать или масштабировать Глобус. При нажатии на '+/-' на самой карте - zoom изменится, но при перемещении Глобуса вернется к прежнему значению.">
<b><font style="color: rgb(244, 0, 0)">Я</font>ndex Map </b> 
<br>- следит за Глобусом 
<br>- не показывает поле обзора 
<br>- показывает метку геокодера
<br><table><tr><td>яZ = gZ(<td><td id='id_zoom_gmap'></td><td>) <a href="#" onClick="plusYandexMapZoomDelta();">+</a>/<a href="#" onClick="minusYandexMapZoomDelta();">-</a> <td><td id='id_d_zoom_ymap'><td><td> = <td><td id='id_zoom_ymap'></td></tr></table>
<a href="#" onClick="hideYandexmap();"><img align=right src="https://sites.google.com/site/3dcoastliner/home/blue_close_button_16x16.png?attredirects=0" title="hide-скрыть"></a>
</div>
<div id="yandexmap" style="position: absolute; right: 0px; top: 195px; width: 185px; height: 270px">
</div>

<div id='wikimapia_content' style="position: absolute; right: 0px; top: 110px; width: 185px; height: 40px">
<b>Wikimapia</b>
<br>- не следит за Глобусом 
<br>- не показывает поле обзора 
<br>- не показывает метку геокодера
<br>- zoom меняетя в ручную (+,-) 
</div>
<div id='wikimapia' style="position: absolute; right: 0px; top: 195px; width: 185px; height: 270px">
<iframe src="http://wikimapia.org/#lat=44.777913&lon=37.5317383&z=9&l=1&ifr=1&m=b" width="185" height="270" frameborder="0"></iframe>
</div>

<div id='osmmap_content' style="position: absolute; right: 0px; top: 110px; width: 185px; height: 40px">
<b>Open Street Map</b>
<br>- не следит за Глобусом 
<br>- не показывает поле обзора 
<br>- не показывает метку геокодера
<br>- zoom меняетя в ручную (+,-) 
</div>
<div id='osmmap' style="position: absolute; right: 0px; top: 195px; width: 185px; height: 270px">
<iframe width="185" height="270" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=36.947,44.359,37.997,45.214&amp;layer=mapnik" style="border: 0px solid black"></iframe>
<br /><small><a href="http://www.openstreetmap.org/?lat=44.7865&amp;lon=37.472&amp;zoom=9&amp;layers=M">?</a></small>
</div>

<div id="webgl_content" style="background-color: transparent; font-family: verdana, sans-serif; color: rgb(200, 200, 200); font-size:  x-small; position: absolute; right: 0px; top: 110px; width: 185px; height: 40px">
<b>WebGL Earth</b>
<br>(future feature)<br>
<form name="formselectwebgl" action=""> 
	<input name="selectwebgl" type="radio" checked onclick="earth.setBaseMap(bingR);">Road<br> 
	<input name="selectwebgl" type="radio" onclick="earth.setBaseMap(bingA);">Aerial<br>
	<input name="selectwebgl" type="radio" onclick="earth.setBaseMap(bingAWL);">Aerial with labels<br>
</form>
</div>

<div id='webgl_earth' style="position: absolute; right: 0px; top: 190px; width: 185px; height: 270px"></div>

<div id="divcamlookradio"  style="position: absolute; right: 0px; top: 470px; width: 185px; height: 30px">
<form name="formcamlook" action="">
	<input type="checkbox" checked onclick='toggleDivCamLookat();' name="cbgooglemap">
	<input name="camlook" type="radio" checked onclick="showCamera();" name="showcamera"><b> Camera
	<input name="camlook" type="radio" onclick="showLookat();" name="showlookat"> LookAt</b><br>
</form>
</div>
<div id="divcamlookat" style="position: absolute; right: 0px; top: 280px; width: 185px; height: 70px">
	<div id="camera" style="position: absolute; right: 0px; top: 0px; width: 185px; height: 70px">
	<table>
		<tr><td>Latitude:<td><td id='id_lat_cam'></td></tr>
		<tr><td>Longitude:<td><td id='id_lng_cam'></td></tr>
		<tr><td>Altitude:<td><td id='id_alt_cam'></td></tr>
		<tr><td>Heading:<td><td id='id_head_cam'></td></tr>
		<tr><td>Tilt:<td><td id='id_tilt_cam'></td></tr>
		<tr><td>Roll:<td><td id='id_roll_cam'></td></tr>
		<tr><td>100/logAlt - 2:<td><td id='id_noalt_cam'></td></tr>
		
	</table>
	</font>	
	</div>

	<div id="lookat" style="position: absolute; right: 0px; top: 0px; width: 185px; height: 70px">
	<table>
		<tr><td>Latitude:<td><td id='id_lat_la'></td></tr>
		<tr><td>Longitude:<td><td id='id_lng_la'></td></tr>
		<tr><td>Altitude:<td><td id='id_alt_la'></td></tr>
		<tr><td>Range:<td><td id='id_rng_la'></td></tr>
		<tr><td>Heading:<td><td id='id_head_la'></td></tr>
		<tr><td>Tilt:<td><td id='id_tilt_la'></td></tr>
		
	</table>
	</font>	
	</div>
</div>
</div>
<!--<script>
//<a href="#" onClick="initYandexMap();"><img align=right src="blue_reload_button_16x16.PNG"></a>
//<tr><td>GoogleMapZoom:<td><td id='id_zoom_gmap'></td></tr>
//<tr><td>YandexMapZoom:<td><td id='id_zoom_ymap'></td></tr>
	var divGuestbookServletVisibleState=false;
function toggleDivGuestbookServlet() {
      if (divGuestbookServletVisibleState == true) {hideDivGuestbookServlet();}
      else {showDivGuestbookServlet();}
}  
function showDivGuestbookServlet() {
	document.getElementById("divguestbookservlet").hidden = false;
		divGuestbookServletVisibleState = true;
}
function hideDivGuestbookServlet() {
	document.getElementById("divguestbookservlet").hidden = true;
	  divGuestbookServletVisibleState = false;
}
</script>-->
<script>
	var divPhotoServletVisibleState=true;
function toggleDivPhotoServlet() {
      if (divPhotoServletVisibleState == true) {hideDivPhotoServlet();}
      else {showDivPhotoServlet();}
}  
function showDivPhotoServlet() {
	document.getElementById("divphotoservlet").hidden = false;
	  divPhotoServletVisibleState = true;
}
function hideDivPhotoServlet() {
	document.getElementById("divphotoservlet").hidden = true;
	  divPhotoServletVisibleState = false;
}
</script>

<script>
//style="background-color: rgb(192,227,244); font-family: verdana, sans-serif; color: rgb(61, 133, 198); font-size:  x-small; position: absolute; right: 40%; left:60%; top: 10px; height: 100px" title="Ява-сервлет 'Гостевая книга'"
//<tr><td>GoogleMapZoom:<td><td id='id_zoom_gmap'></td></tr>
//<tr><td>YandexMapZoom:<td><td id='id_zoom_ymap'></td></tr>

function showDivPhoto() {
	document.getElementById("divuploadphoto").hidden = false;
	document.getElementById("divupload3dmodel").hidden = true;
}
function showDivScan() {
	document.getElementById("divuploadphoto").hidden = true;
	document.getElementById("divupload3dmodel").hidden = false;
}
</script>

<script>
function showGooglemap() {
	document.getElementById("googlemap_content").hidden = false;
	document.getElementById("googlemap").hidden = false;
	
	document.getElementById("yandexmap_content").hidden = true;
	document.getElementById("yandexmap").hidden = true;
		
	document.getElementById("wikimapia_content").hidden = true;
	document.getElementById("wikimapia").hidden = true;
	
	document.getElementById("osmmap_content").hidden = true;
	document.getElementById("osmmap").hidden = true;
	
	document.getElementById("webgl_content").hidden = true;
	document.getElementById("webgl_earth").hidden = true;
}
function showYandexMap() {
	document.getElementById("googlemap_content").hidden = true;
	document.getElementById("googlemap").hidden = true;
	
	document.getElementById("yandexmap_content").hidden = false;
	document.getElementById("yandexmap").hidden = false;
	
	document.getElementById("wikimapia_content").hidden = true;
	document.getElementById("wikimapia").hidden = true;
	
	document.getElementById("osmmap_content").hidden = true;
	document.getElementById("osmmap").hidden = true;
		
	document.getElementById("webgl_content").hidden = true;
	document.getElementById("webgl_earth").hidden = true;
}

function showWikimapia() {
	document.getElementById("googlemap_content").hidden = true;
	document.getElementById("googlemap").hidden = true;
	
	document.getElementById("yandexmap_content").hidden = true;
	document.getElementById("yandexmap").hidden = true;
	
	document.getElementById("wikimapia_content").hidden = false;
	document.getElementById("wikimapia").hidden = false;
	
	document.getElementById("osmmap_content").hidden = true;
	document.getElementById("osmmap").hidden = true;
			
	document.getElementById("webgl_content").hidden = true;
	document.getElementById("webgl_earth").hidden = true;
}
function showOsm() {
	document.getElementById("googlemap_content").hidden = true;
	document.getElementById("googlemap").hidden = true;
	
	document.getElementById("yandexmap_content").hidden = true;
	document.getElementById("yandexmap").hidden = true;
	
	document.getElementById("wikimapia_content").hidden = true;
	document.getElementById("wikimapia").hidden = true;
	
	document.getElementById("osmmap_content").hidden = false;
	document.getElementById("osmmap").hidden = false;
			
	document.getElementById("webgl_content").hidden = true;
	document.getElementById("webgl_earth").hidden = true;
}
function showWebGLEarth() {
	document.getElementById("googlemap_content").hidden = true;
	document.getElementById("googlemap").hidden = true;
	
	document.getElementById("yandexmap_content").hidden = true;
	document.getElementById("yandexmap").hidden = true;
	
	document.getElementById("wikimapia_content").hidden = true;
	document.getElementById("wikimapia").hidden = true;
	
	document.getElementById("osmmap_content").hidden = true;
	document.getElementById("osmmap").hidden = true;
		
	document.getElementById("webgl_content").hidden = false;
	document.getElementById("webgl_earth").hidden = false;
}
function showAndrpan() {
	document.getElementById("googlemap_content").hidden = true;
	document.getElementById("googlemap").hidden = true;
	
	document.getElementById("yandexmap_content").hidden = true;
	document.getElementById("yandexmap").hidden = true;
	
	document.getElementById("wikimapia_content").hidden = true;
	document.getElementById("wikimapia").hidden = true;
	
	document.getElementById("osmmap_content").hidden = true;
	document.getElementById("osmmap").hidden = true;
		
	document.getElementById("webgl_content").hidden = true;
	document.getElementById("webgl_earth").hidden = true;
}
function hideGooglemap() {
	document.getElementById("googlemap").hidden = true;
}
function hideYandexmap() {
	document.getElementById("yandexmap").hidden = true;
}
//<img src="http://code.google.com/appengine/images/appengine-noborder-120x30.gif" alt="Технология Google App Engine" />
//"image" src="https://sites.google.com/site/3dcoastliner/home/uncheck_radio_button_10x10.png?attredirects=0"
//<div id='andrpan_content' style="position: absolute; position: absolute; right: 0px; top: 110px; width: 185px; height: 40px">
//<font face="verdana, sans-serif" style="color: rgb(200, 200, 200);" size="1"><b>Андроид-панорамы</b><br>
//((future feature))<br> 
//Dermandar <a href="#" onClick="initDermandarMap(); return false;">init</a> <a href="http://www.dermandar.com/worldmap/"><img src="https://sites.google.com/site/3dcoastliner/home/external.png?attredirects=0"></a><br> 
//360 Panorama <a href="#" onClick="init360Panorama(); return false;"></a><a href="http://occipital.com/360/verse#?q=Extraordinary%20Views"><img src="https://sites.google.com/site/3dcoastliner/home/external.png?attredirects=0"></a><br>
//360 Photaf Panorama <a href="#" onClick="initPhotaf(); return false;"></a><a href="http://www.photaf.com/maps.php"><img src="https://sites.google.com/site/3dcoastliner/home/external.png?attredirects=0"></a><br> 
//</font>
//</div>  
//document.getElementById("andrpan_content").hidden = false;
//document.getElementById("map_dermandar").hidden = false;
</script>

<script src="http://www.webglearth.com/api.js"></script>
<script>
	var earth;
	var bingA, bingAWL, bingR;
function initWebGL() {
    var options = { zoom: 0, position: [44.429800, 33.651809], proxyHost: 'http://data.webglearth.com/cgi-bin/corsproxy.fcgi?url=' };
    earth = new WebGLEarth('webgl_earth', options);
    
    // Get your own key from: https://www.bingmapsportal.com/ 
	//var bingKey = 'AsLurrtJotbxkJmnsefUYbatUuBkeBTzTL930TvcOekeG8SaQPY9Z5LDKtiuzAOu';
    var bingKey = 'AiU9abPCMTFQ-Y_J8yw1ZCn8WgHxSIaNypMDVPdFyjckUOKCcb_4P-DuTsLitgxE';
	
    bingR = earth.initMap(WebGLEarth.Maps.BING, ['Road', bingKey]);
    bingA = earth.initMap(WebGLEarth.Maps.BING, ['Aerial', bingKey]);
    bingAWL = earth.initMap(WebGLEarth.Maps.BING, ['AerialWithLabels', bingKey]);
        
    earth.setBaseMap(bingR);
 }	
</script>

<script>
	var divCamLookatVisibleState=true;
function toggleDivCamLookat(){
      if (divCamLookatVisibleState == true) {document.getElementById("divcamlookat").hidden = true; divCamLookatVisibleState = false;}
      else {document.getElementById("divcamlookat").hidden = false; divCamLookatVisibleState = true;}
}  
</script>	

<script>
function showCamera() {
	document.getElementById("camera").hidden = false;
    document.getElementById("lookat").hidden = true;
}
	
function showLookat() {
    document.getElementById("camera").hidden = true;
    document.getElementById("lookat").hidden = false;
}
</script>

</body>
</html>




